<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>menu dev</title>
		<script src="../jquery-ui-1/js/jquery-1.4.2.min.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<script src="../jquery-ui-1/js/jquery-ui-1.8.custom.min.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		
		<script src="jquery.menu.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<script type="text/javascript" language="javascript" charset="utf-8">
			$(function() {
				$("#cm").menu('create', {
					context:"h1",
					backButtonAdjust:36
				}).bind("menuselect", function(e, c, m, i) {
						console.info( "h1 > " + $("a", i).text() );
				});
				
				$("#cm2").menu('create', {
					context:"h2",
					backButtonAdjust:36,
					showOn:'dblclick',
					position: 'element'
				}).bind("menuselect", function(e, c, m, i) {
					if( $(m).attr("name") == "textform" ) {
						var a = $("textarea", m).val();
						var d = Number( $("input", m).val() );
						$("textarea", m).val("");
						setTimeout(function() {
							alert(a);
						}, d);
					}
				});
				
				$("#cm3").menu('create').bind("menuselect", function(e, c, m, i) {
					if( $(m).attr("name") == "textform" ) {
						var a = $("textarea", m).val();
						var d = Number( $("input", m).val() );
						$("textarea", m).val("");
						setTimeout(function() {
							alert(a);
						}, d);
					}
				});;
			});
		</script>
		
		<link rel="stylesheet" href="../jquery-ui-1/css/smoothness/jquery-ui-1.8.custom.css" type="text/css" media="screen" title="no title" charset="utf-8" />
		<link rel="stylesheet" href="menu.css" type="text/css" media="screen" title="no title" charset="utf-8" />
		<style type="text/css" media="screen">
			body {
				margin:20px;
				position:relative;
			}
			ul.wider li {
				width:600px;
			}
		</style>
		
		
		<object type="text/html" style="display:none">
			<!-- Menu -->
			<ul id="cm2">
				<li>
					<a>Booya 1</a>
				</li>
				<li>
					<a>Booya 2</a>
					<ul>
						<li>
							<a>Booya 2.1</a>
						</li>
						<li>
							<a>Alert Dialog</a>
							<ul name="textform" class="wider">
								<li class="-worker-item">
									<h3 style="margin:0px; padding:0px">Alert Dialog</h3>
									<textarea name="message" style="width:600px; height:48px; margin:4px"></textarea>
									<input name="delay" value="300" />
								</li>
								<li>
									Deeper
									<ul>
										<li>
											<a>Item 2.2.1</a>
										</li>
										<li>
											<a>Item 2.2.2</a>
										</li>
										<li>
											<a>Item 2.2.3</a>
										</li>
									</ul>
								</li>
								<li>
									<a>Show Dialog</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>

			<!-- Menu -->
			<ul id="cm">
				<li>
					<a>Item 1</a>
				</li>
				<li>
					<a>Item 2</a>
					<ul>
						<li>
							<a>Item 2.1</a>
						</li>
						<li>
							<a>Item 2.2</a>
							<ul>
								<li>
									<a>Item 2.2.1</a>
								</li>
								<li>
									<a>Item 2.2.2</a>
								</li>
								<li>
									<a>Item 2.2.3</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>
					<a>Item 3</a>
					<ul>
						<li>
							<a>Item 3.1</a>
						</li>
						<li>
							<a>Item 3.2</a>
							<ul>
								<li>
									<a>Item 3.2.1</a>
								</li>
								<li>
									<a>Item 3.2.2</a>
									<ul>
										<li>
											<a>Item 3.2.2.1</a>
										</li>
										<li>
											<a>Item 3.2.2.2</a>
										</li>
										<li>
											<a>Item 3.2.2.3</a>
										</li>
										<li>
											<a>Item 3.2.2.4</a>
										</li>
										<li>
											<a>Item 3.2.2.5</a>
										</li>
										<li>
											<a>Item 3.2.2.6</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</object>
	</head>
	<body>
		<h1>Right Click Me!</h1>
		<h2>Double Click Me!</h2>
		
		
		<div style="position:relative">
			<ul id="cm3">
				<li>
					<a>Booya 1</a>
				</li>
				<li>
					<a>Booya 2</a>
					<ul>
						<li>
							<a>Booya 2.1</a>
						</li>
						<li>
							<a>Alert Dialog</a>
							<ul name="textform" class="wider">
								<li class="-worker-item">
									<h3 style="margin:0px; padding:0px">Alert Dialog</h3>
									<textarea name="message" style="width:600px; height:48px; margin:4px"></textarea>
									<input name="delay" value="300" />
								</li>
								<li>
									Deeper
									<ul>
										<li>
											<a>Item 2.2.1</a>
										</li>
										<li>
											<a>Item 2.2.2</a>
										</li>
										<li>
											<a>Item 2.2.3</a>
										</li>
									</ul>
								</li>
								<li>
									<a>Show Dialog</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>